.pxToRem(@p, @px){
    @{p}: @px / 75 * 1rem;
}

body{
	
	background:rgb(244,244,244);
}
header{
	display:flex;
	flex-direction:column;
	background:#fff;
	position:fixed;
	left:0;
	right:0;
	z-index:1000;
	.pxToRem(height, 150);
	.top{
		.pxToRem(padding-top, 20);
		.pxToRem(padding-bottom, 20);
		display:flex;
		.left{
			display:flex;
			justify-content:center;
			align-items:center;
			.pxToRem(padding-right, 20);
			.pxToRem(padding-left, 20);
		}
		.center{
			display:flex;
			
			align-items:center;
			flex:1;
			border:1px solid #ccc;
			.pxToRem(border-radius,30);
			color:#ccc;
			.pxToRem(padding-top, 10);
			.pxToRem(padding-bottom, 10);
		}
		.right{
			display:flex;
			justify-content:center;
			align-items:center;
			.pxToRem(padding-right, 20);
			.pxToRem(padding-left, 20);
		}
	}
	.bottom{
		text-align:center;
		.active-nav{
			border-bottom:1px solid red;
			color:red;
		}
		.swiper-slide{
			.pxToRem(padding-top, 20);
			.pxToRem(padding-bottom, 20);
		}
	}
}


.banner{
	.pxToRem(padding-top,150);
	img{
		width:100%;
	}
}
.navbar{
	display:flex;
	background:#fff;
	text-align:center;
	.pxToRem(padding-top, 20);
	.pxToRem(padding-bottom, 20);
	.swiper-slide{
		text-align:center;
		dl{
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			dt{	
				.pxToRem(padding-bottom, 20);
				display:flex;
				justify-content:center;
				align-items:center;
				.pxToRem(height,63);
				.pxToRem(width,90);
			}
		}
	}
}
.headline{
	display:flex;
	background:#fff;
	.pxToRem(margin-top,20);
	.pxToRem(padding-top, 20);
	.pxToRem(padding-bottom, 20);
	.left{
		display:flex;
		justify-content:center;
		align-items:center;
		border-right:1px solid #ccc;
		.pxToRem(padding-right, 30);
		.pxToRem(padding-left, 30);
		p{
			.pxToRem(width,48);
			color:#cbb581;
		}
	}
	.right{
		display:flex;
		figure{
			.pxToRem(width,65);
			img{
				width:100%;
			}
		}
		.info{
			h6{
				.pxToRem(padding-bottom,10);
			}
		}
	}
	._right{
		.pxToRem(height, 70);
		flex:1;
		.pxToRem(padding-left,30)
	}
}
.choiceness{
	display:flex;
	flex-wrap:wrap;
	.pxToRem(margin-top,20);
	.pxToRem(margin-bottom,20);
	.pxToRem(margin-right,10);
	.pxToRem(margin-left,10);

	.items{
		display:flex;
		align-items:center;
		background:#fff;
		.pxToRem(width,360);
		.pxToRem(height,150);
		.pxToRem(margin-right,5);
		.pxToRem(margin-bottom,5);
		figure{
			.pxToRem(width,120);
			.pxToRem(height,120);
			.pxToRem(padding-right,30);
			.pxToRem(padding-left,30);
			img{
				width:100%;
			}
		}

	}	
}
.recommend{
	background:#fff;
	text-align:center;
	.pxToRem(margin-bottom,130);
	h3{
		.pxToRem(font-size,40);
		.pxToRem(padding-top,10);
		.pxToRem(padding-bottom,10);
	}
	p{
		.pxToRem(padding-bottom,20);
	}
	figure{
		.pxToRem(padding-right,20);
		.pxToRem(padding-left,20);
		.pxToRem(margin-bottom,20);
		img{
			width:100%;
		}
	}
}
footer{
	display:flex;
	justify-content:space-around;
	align-items:center;
	.pxToRem(height,110);
	background:#fff;
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	z-index:10000;
	dl{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		dt{
			.pxToRem(height,50);
			.pxToRem(width,60);
			img{
				width:100%;
				.pxToRem(height,50);
			}
		}
		dd{
			.pxToRem(padding-top,10);
			.pxToRem(padding-bottom,10);
		}
	}
}